

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />

    <!-- disable zooming -->
    <meta name="viewport" content="initial-scale=1.0, user-scalable=0" />

    <title>Cube Rotate Demo</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Helvetica Neue', Arial, sans-serif;
            -webkit-text-size-adjust: none;
            color: #333;
            max-width: 720px;
            margin: 30px auto;
            padding: 10px;
        }

        #options {
            position: relative;
            z-index: 100;
            margin-bottom: 40px;
        }

    </style>


    <style media="screen">

        .container {
            width: 200px;
            height: 200px;
            position: relative;
            margin: 0 auto 40px;
            border: 1px solid #CCC;
            perspective: 1000px;
        }

        #cube {
            width: 100%;
            height: 100%;
            position: absolute;
            transform-style: preserve-3d;
            transition: transform 1s;
        }

        #cube figure {
            display: block;
            position: absolute;
            width: 196px;
            height: 196px;
            border: 2px solid black;
            line-height: 196px;
            font-size: 120px;
            font-weight: bold;
            color: white;
            text-align: center;
        }

        #cube.panels-backface-invisible figure {
            backface-visibility: hidden;
        }

        #cube .front  { background: hsla(   0, 100%, 50%, 0.7 ); }
        #cube .back   { background: hsla(  60, 100%, 50%, 0.7 ); }
        #cube .right  { background: hsla( 120, 100%, 50%, 0.7 ); }
        #cube .left   { background: hsla( 180, 100%, 50%, 0.7 ); }
        #cube .top    { background: hsla( 240, 100%, 50%, 0.7 ); }
        #cube .bottom { background: hsla( 300, 100%, 50%, 0.7 ); }

        #cube .front  {
            transform: translateZ( 100px );
        }
        #cube .back   {
            transform: rotateX( -180deg ) translateZ( 100px );
        }
        #cube .right {
            transform: rotateY(   90deg ) translateZ( 100px );
        }
        #cube .left {
            transform: rotateY(  -90deg ) translateZ( 100px );
        }
        #cube .top {
            transform: rotateX(   90deg ) translateZ( 100px );
        }
        #cube .bottom {
            transform: rotateX(  -90deg ) translateZ( 100px );
        }

        #cube.show-front {
            transform: translateZ( -100px );
        }
        #cube.show-back {
            transform: translateZ( -100px ) rotateX( -180deg );
        }
        #cube.show-right {
            transform: translateZ( -100px ) rotateY(  -90deg );
        }
        #cube.show-left {
            transform: translateZ( -100px ) rotateY(   90deg );
        }
        #cube.show-top {
            transform: translateZ( -100px ) rotateX(  -90deg );
        }
        #cube.show-bottom {
            transform: translateZ( -100px ) rotateX(   90deg );
        }

    </style>

</head>
<body>

<h1>Cube Rotate Demo</h1>
<h4>A study for css3.0, such as rotate/transform/....</h4>

<section class="container">
    <div id="cube" class="show-front">
        <figure class="front">1</figure>
        <figure class="back">2</figure>
        <figure class="right">3</figure>
        <figure class="left">4</figure>
        <figure class="top">5</figure>
        <figure class="bottom">6</figure>
    </div>
</section>

<section id="options">
    <p id="show-buttons">
        <button class="show-front">Show 1</button>
        <button class="show-back">Show 2</button>
        <button class="show-right">Show 3</button>
        <button class="show-left">Show 4</button>
        <button class="show-top">Show 5</button>
        <button class="show-bottom">Show 6</button>
    </p>

    <p>
        <button id="toggle-backface-visibility">Toggle Backface Visibility</button>
    </p>
</section>

<script src="./js/cube-rotate-demo.js"></script>

<script>
    var init = function() {
        var cube = document.getElementById('cube'),
            showPanelButtons = document.querySelectorAll('#show-buttons button'),
            panelClassName = 'show-front',

            onButtonClick = function(event) {
                cube.removeClassName( panelClassName );
                panelClassName = event.target.className;
                cube.addClassName( panelClassName );
            };

        for (var i=0, len = showPanelButtons.length; i < len; i++) {
            showPanelButtons[i].addEventListener( 'click', onButtonClick, false);
        }

        document.getElementById('toggle-backface-visibility').addEventListener( 'click', function(){
            cube.toggleClassName('panels-backface-invisible');
        }, false);

    };

//    window.addEventListener( 'DOMContentLoaded', init, false);
    window.onload = init;

</script>

</body>
</html>